<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>用栅格系统实现页面布局</title>

        <!-- 链接外部样式文件 -->
        <link rel="stylesheet" href="cells-float.css">

        <!-- 使用 style 元素 嵌入自定义的 CSS样式  -->
        <style type="text/css">
            .wrapper { 
                border: 1px solid blue ; 
                width: 80% ;
                margin: auto ;
            }

            .first {
                height: 80px ;
                background: #888888 ;
            }

            .first>a { 
                height: 80px ; 
                line-height: 80px ; 
                text-align: center ; 
                text-decoration: none ;
                color: #fff ;
            }

            .first>a:hover {
                background: #666666 ;
            }

            .first>a:first-child {
                background: green;
            }

            .second {
                height: 600px ;
            }

            .second>.left  { height: 600px ;  }
            .second>.left .list { margin: 15px ; background-color: #dedede; height: 570px ;}
            .second>.right { height: 600px ;  }
            .second>.right .desc { margin: 15px ; background-color: #ffff00 ; height: 570px ;}


            .third {   background: #383838 ;  height: 100px ; }
            .third>p{ line-height: 30px ; color: #fff ; margin: 35px 15px ; }

        </style>

    </head>
    <body>

        <header class="wrapper row first">
            <a href="#" class="cell-12-1">首页</a>
            <a href="#" class="cell-12-1">新闻</a>
            <a href="#" class="cell-12-1">联系我们</a>
            <a href="#" class="cell-12-1">关于我们</a>
        </header>

        <main class="wrapper second row">
            <div class="left cell-12-4">
                <div class="list"></div>
            </div>
            <div class="right cell-12-8">
                <div class="desc"></div>
            </div>
        </main>

        <footer class="wrapper third">
            <p>底部文本</p>
        </footer>
        
    </body>
</html>